<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>key的使用</title>
  <script src="vue.js"></script>
</head>
<!--

-->
<body>
<div id="root">
    <button @click.once="add" >add</button>
    <input type="text" placeholder="scanf name" v-model="value">
    <ul>
        <li>List:</li>
<!--        遍历数组-->
        <li v-for="(p,index) in newPersons" :key="p.id">{{p.name}}-{{p.age}}</li>

    </ul>
</div>
</body>
<script type="text/javascript">
    const  vm = new Vue({
        el:"#root",
        data:{
            value:'',
            persons:[
                {id:'001',name:"马冬梅",age:11},
                {id:'002',name:"周冬雨",age:12},
                {id:'003',name:"周杰伦",age:13},
                {id:'004',name:"盖伦",age:15}
            ],
            //newPersons:[]
        },
        //computed实现
        computed:{
            newPersons(){
            return this.persons.filter((p)=>{return p.name.indexOf(this.value)!==-1})
            }
        },

        //watch实现
        // watch:{
        //     value:{
        //         immediate:true,
        //         handler(val){
        //             this.newPersons = this.persons.filter((p)=>{
        //             return p.name.indexOf(val)!==-1})
        //         }
        //
        //     }
        // }
    })

</script>

</html>